<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选反选</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .wrap {
            margin: 0 auto;
            width: 300px;
        }
        
        table {
            width: 300px;
            border-collapse: collapse;
            border-spacing: 0;
            border: solid 1px #b3b3d1;
        }
        
        th,
        td {
            border: 1px solid #3b3b1d;
            text-align: center;
            height: 60px;
        }
        
        th {
            background-color: #2939c8;
            font: bold 28px "微软雅黑";
            color: #FFF;
        }
        
        td {
            font: bold 12px "微软雅黑";
        }
        
        tbody tr:hover {
            background-color: #bb9bed;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" name="" id="sAll"></th>
                    <th>商品</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>金额</th>
                </tr>
            </thead>
            <tbody id="sItem">
                <tr class="item_in">
                    <td><input type="checkbox" name="" class="call_in"></td>
                    <td>华为nova4</td>
                    <td>6000</td>
                    <td>1</td>
                    <td>6000</td>
                </tr>
                <tr class="item_in">
                    <td><input type="checkbox" name="" class="call_in"></td>
                    <td>华为nova3</td>
                    <td>5000</td>
                    <td>2</td>
                    <td>10000</td>
                </tr>
                <tr class="item_in">
                    <td><input type="checkbox" name="" class="call_in"></td>
                    <td>华为nova2</td>
                    <td>4000</td>
                    <td>3</td>
                    <td>12000</td>
                </tr>
                <tr class="item_in">
                    <td><input type="checkbox" name="" class="call_in"></td>
                    <td>华为nova1</td>
                    <td>3000</td>
                    <td>4</td>
                    <td>12000</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>
<script>
    let sAll = window.document.querySelector('#sAll');
    let items = window.document.querySelectorAll('.call_in');
    let trs = window.document.querySelectorAll('.item_in');
    sAll.onclick = function(params) {
        //  window.console.log(this.checked);
        if (this.checked) {
            // 调用方法将全部列表选中
            setAllChecked();
        } else {
            // 调用方法将全部列表去掉选中
            setAllUnchecked();
        }
    };

    function setAllChecked(params) {
        // window.alert('ok');
        for (let index = 0; index < items.length; index++) {
            const element = items[index];
            if (!element.checked) {
                element.checked = true;
            }
        }
    }

    function setAllUnchecked(params) {
        for (let index = 0; index < items.length; index++) {
            const element = items[index];
            if (element.checked) {
                element.checked = false;
            }
        }
    }
    for (let i = 0; i < items.length; i++) {
        // 代表是否被全选 全选为true

        items[i].onclick = function() {
            check(items);
        }
        trs[i].onclick = function() {
            let flag = items[i].checked;
            if (flag) {
                flag = false
            } else {
                flag = true;
            }
            items[i].checked = flag;
            check(items);
        }

    }

    function check(items) {
        let flag = true;
        for (let j = 0; j < items.length; j++) {
            if (!items[j].checked) {
                flag = false;
            }
        }
        sAll.checked = flag;
    }
</script>